"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _jsxRuntime = require("react/jsx-runtime");

var _icons = require("@ant-design/icons");

var _proUtils = require("@ant-design/pro-utils");

var _antdV = require("antd-v4");

var _classnames = _interopRequireDefault(require("classnames"));

var _react = _interopRequireWildcard(require("react"));

var _FieldContext = _interopRequireDefault(require("../../FieldContext"));

var _helpers = require("../../helpers");

require("./index.less");

var Group = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var _React$useContext = _react.default.useContext(_FieldContext.default),
      groupProps = _React$useContext.groupProps;

  var _groupProps$props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, groupProps), props),
      children = _groupProps$props.children,
      collapsible = _groupProps$props.collapsible,
      defaultCollapsed = _groupProps$props.defaultCollapsed,
      style = _groupProps$props.style,
      labelLayout = _groupProps$props.labelLayout,
      _groupProps$props$tit = _groupProps$props.title,
      title = _groupProps$props$tit === void 0 ? props.label : _groupProps$props$tit,
      tooltip = _groupProps$props.tooltip,
      _groupProps$props$ali = _groupProps$props.align,
      align = _groupProps$props$ali === void 0 ? 'start' : _groupProps$props$ali,
      direction = _groupProps$props.direction,
      _groupProps$props$siz = _groupProps$props.size,
      size = _groupProps$props$siz === void 0 ? 32 : _groupProps$props$siz,
      titleStyle = _groupProps$props.titleStyle,
      titleRender = _groupProps$props.titleRender,
      spaceProps = _groupProps$props.spaceProps,
      extra = _groupProps$props.extra,
      autoFocus = _groupProps$props.autoFocus;

  var _useMountMergeState = (0, _proUtils.useMountMergeState)(function () {
    return defaultCollapsed || false;
  }, {
    value: props.collapsed,
    onChange: props.onCollapse
  }),
      _useMountMergeState2 = (0, _slicedToArray2.default)(_useMountMergeState, 2),
      collapsed = _useMountMergeState2[0],
      setCollapsed = _useMountMergeState2[1];

  var _useContext = (0, _react.useContext)(_antdV.ConfigProvider.ConfigContext),
      getPrefixCls = _useContext.getPrefixCls;

  var _useGridHelpers = (0, _helpers.useGridHelpers)(props),
      ColWrapper = _useGridHelpers.ColWrapper,
      RowWrapper = _useGridHelpers.RowWrapper;

  var className = getPrefixCls('pro-form-group');
  var collapsibleButton = collapsible && (0, _jsxRuntime.jsx)(_icons.RightOutlined, {
    style: {
      marginRight: 8
    },
    rotate: !collapsed ? 90 : undefined
  });
  var label = (0, _jsxRuntime.jsx)(_proUtils.LabelIconTip, {
    label: collapsibleButton ? (0, _jsxRuntime.jsxs)("div", {
      children: [collapsibleButton, title]
    }) : title,
    tooltip: tooltip
  });
  var Wrapper = (0, _react.useCallback)(function (_ref) {
    var dom = _ref.children;
    return (0, _jsxRuntime.jsx)(_antdV.Space, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, spaceProps), {}, {
      className: (0, _classnames.default)("".concat(className, "-container"), spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.className),
      size: size,
      align: align,
      direction: direction,
      style: (0, _objectSpread2.default)({
        rowGap: 0
      }, spaceProps === null || spaceProps === void 0 ? void 0 : spaceProps.style),
      children: dom
    }));
  }, [align, className, direction, size, spaceProps]);
  var titleDom = titleRender ? titleRender(label, props) : label;

  var _useMemo = (0, _react.useMemo)(function () {
    var hiddenChildren = [];

    var childrenList = _react.default.Children.toArray(children).map(function (element, index) {
      var _element$props;

      if ( /*#__PURE__*/_react.default.isValidElement(element) && (element === null || element === void 0 ? void 0 : (_element$props = element.props) === null || _element$props === void 0 ? void 0 : _element$props.hidden)) {
        hiddenChildren.push(element);
        return null;
      }

      if (index === 0 && /*#__PURE__*/_react.default.isValidElement(element) && autoFocus) {
        return /*#__PURE__*/_react.default.cloneElement(element, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, element.props), {}, {
          autoFocus: autoFocus
        }));
      }

      return element;
    });

    return [(0, _jsxRuntime.jsx)(RowWrapper, {
      Wrapper: Wrapper,
      children: childrenList
    }, "children"), hiddenChildren.length > 0 ? (0, _jsxRuntime.jsx)("div", {
      style: {
        display: 'none'
      },
      children: hiddenChildren
    }) : null];
  }, [children, RowWrapper, Wrapper, autoFocus]),
      _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
      childrenDoms = _useMemo2[0],
      hiddenDoms = _useMemo2[1];

  return (0, _jsxRuntime.jsx)(ColWrapper, {
    children: (0, _jsxRuntime.jsxs)("div", {
      className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(className, "-twoLine"), labelLayout === 'twoLine')),
      style: style,
      ref: ref,
      children: [hiddenDoms, (title || tooltip || extra) && (0, _jsxRuntime.jsx)("div", {
        className: "".concat(className, "-title"),
        style: titleStyle,
        onClick: function onClick() {
          setCollapsed(!collapsed);
        },
        children: extra ? (0, _jsxRuntime.jsxs)("div", {
          style: {
            display: 'flex',
            width: '100%',
            alignItems: 'center',
            justifyContent: 'space-between'
          },
          children: [titleDom, (0, _jsxRuntime.jsx)("span", {
            onClick: function onClick(e) {
              return e.stopPropagation();
            },
            children: extra
          })]
        }) : titleDom
      }), collapsible && collapsed ? null : childrenDoms]
    })
  });
});

Group.displayName = 'ProForm-Group';
var _default = Group;
exports.default = _default;